<template>
   <div id="page">
      <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[10, 20, 30, 40]"
         :page-size="100"
         layout="total, sizes, prev, pager, next, jumper"
         :total="400">
      </el-pagination>
   </div>
</template>

<script>
export default {
   data() {
      return {
        currentPage: 1
      };
   },
   methods: {
      handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
      }
   },
}
</script>

<style lang="less" scoped>
#page{
   width: 100%;
   height: 70px;
   min-width: 1160px;
   background-color: #fff;
   border-radius: 4px;
   font-family: '微软雅黑';
   font-size: 12px;
   display: flex;
   justify-content: flex-end;

   .el-pagination{
      display: flex;
      align-items: center;
      padding-right: 10px;

      /deep/ ul.el-pager li.number{
         width: 28px;
         min-width: 26px;
         height: 26px;
         border: 1px solid #a9a9a9;
         color: #9c9c9c;
         border-radius: 2px;
         margin: 0 3.5px;
         padding: 0;
      }
      /deep/ ul.el-pager li.active{
         color: #444444;
      }
      /deep/ button{
         width: 28px;
         min-width: 26px;
         height: 26px;
         border: 1px solid #a9a9a9;
         border-radius: 2px;
         padding: 0;
         text-align: center;
         margin: 0 3.5px;
      }
      /deep/ .el-input__inner{
         height: 26px;
         border: 1px solid #a9a9a9;
         border-radius: 4px;
      }
      /deep/ ul.el-pager li.el-icon-more{
         width: 28px;
         min-width: 26px;
         height: 26px;
         border: 1px solid #a9a9a9;
         border-radius: 2px;
         padding: 0;
         margin: 0 3.5px;
      }
   }
}
</style>